<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的关注 - 声破天音乐</title>
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/following.css">
    <link rel="stylesheet" href="assets/css/player-bar.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>

<body>
    <div class="main-container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="logo">
                <a href="landing.html">
                    <svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="25" cy="25" r="20" fill="#1DB954" />
                        <path d="M18 27.5C18 27.5 22 23.5 25 23.5C28 23.5 32 27.5 32 27.5" stroke="black" stroke-width="2" fill="none" />
                        <path d="M16 21.5C16 21.5 22 15.5 25 15.5C28 15.5 34 21.5 34 21.5" stroke="black" stroke-width="2" fill="none" />
                        <path d="M14 15.5C14 15.5 21 7.5 25 7.5C29 7.5 36 15.5 36 15.5" stroke="black" stroke-width="2" fill="none" />
                        <text x="50" y="32" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="white">声破天</text>
                    </svg>
                </a>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="nav-item">
                        <a href="index.html"><i class="fas fa-home"></i> <span data-i18n="nav_home">首页</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="search.html"><i class="fas fa-search"></i> <span data-i18n="nav_search">搜索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="explore.html"><i class="fas fa-compass"></i> <span data-i18n="nav_explore">探索</span></a>
                    </li>
                    <li class="nav-item">
                        <a href="library.html"><i class="fas fa-book"></i> <span data-i18n="nav_library">音乐库</span></a>
                    </li>
                </ul>
            </nav>

            <div class="library-nav">
                <div class="library-header">
                    <h2><i class="fas fa-plus-square"></i> <span data-i18n="create_playlist">创建播放列表</span></h2>
                </div>
                <div class="library-items">
                    <div class="library-item">
                        <div class="liked-songs">
                            <div class="liked-gradient">
                                <i class="fas fa-heart"></i>
                            </div>
                            <h3 data-i18n="liked_songs">我喜欢的歌曲</h3>
                            <p><span data-i18n="playlist">播放列表</span> • 32 <span data-i18n="songs">首歌曲</span></p>
                        </div>
                    </div>
                    <div class="playlists">
                        <div class="playlist-item">
                            <a href="following.html" style="text-decoration: none; color: inherit;">
                                <h3 data-i18n="playlist_1">我的关注</h3>
                                <p data-i18n="playlist_by_user">播放列表 • 用户</p>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </aside>

        <!-- 主内容区 -->
        <main class="content">
            <header class="top-bar">
                <div class="navigation-buttons">
                    <button class="nav-btn"><i class="fas fa-chevron-left"></i></button>
                    <button class="nav-btn"><i class="fas fa-chevron-right"></i></button>
                </div>
                <div class="user-menu">
                    <div class="language-selector">
                        <div class="language-options">
                            <button class="language-btn" data-lang="zh-CN">简体中文</button>
                            <button class="language-btn" data-lang="en">English</button>
                            <button class="language-btn" data-lang="zh-TW">繁體中文</button>
                        </div>
                    </div>
                    <div class="auth-buttons">
                        <a href="login.html" class="login-btn"><i class="fas fa-sign-in-alt"></i> <span data-i18n="login">登录</span></a>
                        <a href="register.html" class="register-btn"><i class="fas fa-user-plus"></i> <span data-i18n="register">注册</span></a>
                    </div>
                </div>
            </header>

            <!-- 关注内容页面 -->
            <div class="content-container following-container">
                <div class="following-header">
                    <div class="header-left">
                        <h1 class="following-title">我的关注</h1>
                        <p class="following-description">查看您关注的艺术家和好友的最新动态</p>
                    </div>
                    <div class="header-right">
                        <div class="search-box">
                            <input type="text" placeholder="搜索关注内容" class="search-input">
                            <i class="fas fa-search search-icon"></i>
                        </div>
                    </div>
                </div>

                <div class="following-tabs">
                    <button class="tab-btn active" data-tab="artists">艺术家</button>
                    <button class="tab-btn" data-tab="friends">好友</button>
                    <button class="tab-btn" data-tab="suggested">推荐关注</button>
                </div>

                <!-- 关注的艺术家 -->
                <div class="tab-content active" id="artists-content">
                    <div class="following-stats">
                        <div class="stat-card">
                            <div class="stat-number">18</div>
                            <div class="stat-label">关注的艺术家</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">5</div>
                            <div class="stat-label">本周新发布</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-number">3</div>
                            <div class="stat-label">即将演出</div>
                        </div>
                    </div>

                    <div class="section-header">
                        <h2>关注的艺术家</h2>
                        <button class="view-all-btn">查看全部</button>
                    </div>

                    <div class="artist-grid">
                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist1.jpg" alt="周杰伦">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">周杰伦</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="unfollow-btn">已关注</button>
                            </div>
                        </div>

                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist2.jpg" alt="Imagine Dragons">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">Imagine Dragons</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="unfollow-btn">已关注</button>
                            </div>
                        </div>

                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist3.jpg" alt="Taylor Swift">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">Taylor Swift</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="unfollow-btn">已关注</button>
                            </div>
                        </div>

                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist4.jpg" alt="陈奕迅">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">陈奕迅</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="unfollow-btn">已关注</button>
                            </div>
                        </div>

                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist5.jpg" alt="林俊杰">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">林俊杰</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="unfollow-btn">已关注</button>
                            </div>
                        </div>

                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/artist6.jpg" alt="G.E.M.邓紫棋">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">G.E.M.邓紫棋</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="unfollow-btn">已关注</button>
                            </div>
                        </div>
                    </div>

                    <div class="section-header">
                        <h2>新发布</h2>
                    </div>

                    <div class="release-grid">
                        <div class="release-card">
                            <div class="release-img">
                                <img src="assets/images/covers/new-release1.jpg" alt="新专辑封面">
                                <div class="release-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <div class="release-info">
                                <h3 class="release-title">新专辑《2024》</h3>
                                <p class="release-artist">周杰伦</p>
                                <p class="release-date">2024-04-01 发布</p>
                            </div>
                        </div>

                        <div class="release-card">
                            <div class="release-img">
                                <img src="assets/images/covers/new-release2.jpg" alt="新单曲封面">
                                <div class="release-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <div class="release-info">
                                <h3 class="release-title">新单曲《Origins》</h3>
                                <p class="release-artist">Imagine Dragons</p>
                                <p class="release-date">2024-03-28 发布</p>
                            </div>
                        </div>

                        <div class="release-card">
                            <div class="release-img">
                                <img src="assets/images/covers/new-release3.jpg" alt="新单曲封面">
                                <div class="release-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <div class="release-info">
                                <h3 class="release-title">新单曲《幻境》</h3>
                                <p class="release-artist">G.E.M.邓紫棋</p>
                                <p class="release-date">2024-03-15 发布</p>
                            </div>
                        </div>
                    </div>

                    <div class="section-header">
                        <h2>即将演出</h2>
                    </div>

                    <div class="event-list">
                        <div class="event-card">
                            <div class="event-date">
                                <div class="event-month">五月</div>
                                <div class="event-day">15</div>
                            </div>
                            <div class="event-info">
                                <h3 class="event-title">周杰伦2024巡回演唱会 - 北京站</h3>
                                <p class="event-location">北京国家体育场（鸟巢）</p>
                            </div>
                            <div class="event-actions">
                                <button class="event-btn">查看详情</button>
                            </div>
                        </div>

                        <div class="event-card">
                            <div class="event-date">
                                <div class="event-month">六月</div>
                                <div class="event-day">08</div>
                            </div>
                            <div class="event-info">
                                <h3 class="event-title">Imagine Dragons亚洲巡演 - 上海站</h3>
                                <p class="event-location">上海梅赛德斯-奔驰文化中心</p>
                            </div>
                            <div class="event-actions">
                                <button class="event-btn">查看详情</button>
                            </div>
                        </div>

                        <div class="event-card">
                            <div class="event-date">
                                <div class="event-month">七月</div>
                                <div class="event-day">20</div>
                            </div>
                            <div class="event-info">
                                <h3 class="event-title">G.E.M.邓紫棋2024巡回演唱会 - 广州站</h3>
                                <p class="event-location">广州天河体育中心</p>
                            </div>
                            <div class="event-actions">
                                <button class="event-btn">查看详情</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 关注的好友 (默认隐藏) -->
                <div class="tab-content" id="friends-content">
                    <div class="empty-state">
                        <div class="empty-icon">
                            <i class="fas fa-user-friends"></i>
                        </div>
                        <h3 class="empty-title">您还没有关注好友</h3>
                        <p class="empty-message">关注好友，了解他们在听什么</p>
                        <button class="find-friends-btn">寻找好友</button>
                    </div>
                </div>

                <!-- 推荐关注 (默认隐藏) -->
                <div class="tab-content" id="suggested-content">
                    <div class="section-header">
                        <h2>您可能感兴趣的艺术家</h2>
                    </div>

                    <div class="artist-grid">
                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/suggested1.jpg" alt="推荐艺术家">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">五月天</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="follow-btn">关注</button>
                            </div>
                        </div>

                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/suggested2.jpg" alt="推荐艺术家">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">The Weeknd</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="follow-btn">关注</button>
                            </div>
                        </div>

                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/suggested3.jpg" alt="推荐艺术家">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">华晨宇</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="follow-btn">关注</button>
                            </div>
                        </div>

                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/suggested4.jpg" alt="推荐艺术家">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">Bruno Mars</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="follow-btn">关注</button>
                            </div>
                        </div>
                    </div>

                    <div class="section-header">
                        <h2>基于您的音乐口味</h2>
                    </div>

                    <div class="artist-grid">
                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/suggested5.jpg" alt="推荐艺术家">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">李荣浩</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="follow-btn">关注</button>
                            </div>
                        </div>

                        <div class="artist-card">
                            <div class="artist-img">
                                <img src="assets/images/artists/suggested6.jpg" alt="推荐艺术家">
                                <div class="artist-overlay">
                                    <button class="play-button"><i class="fas fa-play"></i></button>
                                </div>
                            </div>
                            <h3 class="artist-name">Coldplay</h3>
                            <p class="artist-type">艺术家</p>
                            <div class="artist-actions">
                                <button class="follow-btn">关注</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 底部播放器 -->
    <footer class="player-bar">
        <div class="now-playing">
            <div class="track-info">
                <div class="track-image">
                    <img src="assets/images/covers/cover2.jpg" alt="当前播放歌曲">
                </div>
                <div class="track-details">
                    <h4 class="track-name">当前</h4>
                    <p class="artist-name">晴天 - 周杰伦</p>
                </div>
            </div>
            <div class="track-actions">
                <button class="action-btn"><i class="far fa-heart"></i></button>
                <button class="action-btn"><i class="fas fa-external-link-alt"></i></button>
            </div>
        </div>

        <div class="player-controls">
            <div class="control-buttons">
                <button class="control-btn"><i class="fas fa-random"></i></button>
                <button class="control-btn"><i class="fas fa-step-backward"></i></button>
                <button class="control-btn play-btn"><i class="fas fa-play"></i></button>
                <button class="control-btn"><i class="fas fa-step-forward"></i></button>
                <button class="control-btn"><i class="fas fa-redo"></i></button>
            </div>
            <div class="playback-bar">
                <span class="current-time">0:00</span>
                <div class="progress-bar">
                    <div class="progress"></div>
                    <div class="progress-handle"></div>
                </div>
                <span class="total-time">4:29</span>
            </div>
        </div>

        <div class="player-options">
            <button class="option-btn"><i class="fas fa-list"></i></button>
            <button class="option-btn"><i class="fas fa-desktop"></i></button>
            <div class="volume-control">
                <button class="option-btn"><i class="fas fa-volume-up"></i></button>
                <div class="volume-bar">
                    <div class="volume-level"></div>
                    <div class="volume-handle"></div>
                </div>
            </div>
        </div>
    </footer>

    <script src="assets/js/i18n.js"></script>
    <script src="assets/js/app.js"></script>
    <script src="assets/js/player.js"></script>
    <script src="assets/js/navigation.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // 选项卡切换功能
            const tabButtons = document.querySelectorAll('.tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');

            tabButtons.forEach(button => {
                button.addEventListener('click', () => {
                    // 移除所有激活状态
                    tabButtons.forEach(btn => btn.classList.remove('active'));
                    tabContents.forEach(content => content.classList.remove('active'));

                    // 激活当前选项卡
                    button.classList.add('active');
                    const tabId = button.getAttribute('data-tab');
                    document.getElementById(`${tabId}-content`).classList.add('active');
                });
            });

            // 关注/取消关注功能
            const followButtons = document.querySelectorAll('.follow-btn');
            const unfollowButtons = document.querySelectorAll('.unfollow-btn');

            followButtons.forEach(button => {
                button.addEventListener('click', () => {
                    button.classList.add('following');
                    button.textContent = '已关注';

                    // 这里可以添加关注逻辑
                    console.log('Followed artist');
                });
            });

            unfollowButtons.forEach(button => {
                button.addEventListener('click', () => {
                    if (confirm('确定要取消关注吗？')) {
                        button.classList.remove('following');
                        button.textContent = '关注';

                        // 这里可以添加取消关注逻辑
                        console.log('Unfollowed artist');
                    }
                });
            });

            // 搜索功能
            const searchInput = document.querySelector('.search-input');

            searchInput.addEventListener('keyup', (e) => {
                if (e.key === 'Enter') {
                    // 这里可以添加搜索逻辑
                    console.log('Searching for:', searchInput.value);
                }
            });

            // 查看详情按钮功能
            const eventButtons = document.querySelectorAll('.event-btn');

            eventButtons.forEach(button => {
                button.addEventListener('click', () => {
                    // 这里可以添加跳转到演出详情页的逻辑
                    console.log('View event details');
                });
            });

            // 寻找好友按钮功能
            const findFriendsBtn = document.querySelector('.find-friends-btn');

            if (findFriendsBtn) {
                findFriendsBtn.addEventListener('click', () => {
                    // 这里可以添加寻找好友的逻辑
                    console.log('Finding friends');
                });
            }
        });
    </script>
</body>

</html>